<template>
  <div>
    <div class="zsy_main">
      <div class="selMain">
        <div class="sels">
          <div class="sousuo">
            <select name="" id="">
              <option value="">某某镇</option>
              <option value="">某某镇</option>
              <option value="">某某镇</option>
              <option value="">某某镇</option>
              <option value="">某某镇</option>
            </select>
          </div>
          <div class="sousuo">
            <select name="" id="">
              <option value="">某某村</option>
              <option value="">某某村</option>
              <option value="">某某村</option>
              <option value="">某某村</option>
            </select>
          </div>
        </div>
        <div class="btn">生成报告</div>
      </div>
      <div class="zsy_li_main">
        <div class="zsy_li" v-for="item in navBar">
          <div class="zsy_top">
            <img :src="item.ico" alt="" />
          </div>
          <div class="zsy_text">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navBar: [
        {
          name: "养老",
          ico: require("assets/img/tyy/zs_li_img1.png"),
        },
        {
          name: "人员",
          ico: require("assets/img/tyy/zs_li_img2.png"),
        },
        {
          name: "医疗",
          ico: require("assets/img/tyy/zs_li_img3.png"),
        },
        {
          name: "土地",
          ico: require("assets/img/tyy/zs_li_img4.png"),
        },
        {
          name: "产业",
          ico: require("assets/img/tyy/zs_li_img5.png"),
        },
        {
          name: "资源",
          ico: require("assets/img/tyy/zs_li_img6.png"),
        },
        {
          name: "环境",
          ico: require("assets/img/tyy/zs_li_img7.png"),
        },
      ],
    };
  },
};
</script>
<style scoped lang="scss">
.zsy_main {
  width: 51.375rem;
  height: 35.1875rem;
  background: url(~assets/img/tyy/zs_bg.png) no-repeat;
  background-size: 100% 100%;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .selMain {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -11.875rem;
    margin-top: 1.25rem;
    .sels {
      display: flex;
      justify-content: space-between;
      .sousuo {
        margin: 0 1.25rem;
        select {
          background-color: rgba(0, 46, 115, 0.7);
          border: 0.0625rem solid #48c3ff;
          border-radius: 0.5rem;
          color: #fff;
          width: 10rem;
          height: 3.125rem;
          font-size: 1.375rem;
          text-align: center;
          option {
            font-size: 1rem;
          }
        }
      }
    }
    .btn {
      width: 8rem;
      line-height: 3.3125rem;
      background: url(~assets/img/tyy/btn.png) no-repeat;
      background-size: 100% 100%;
      font-size: 1.125rem;
      text-align: center;
      margin: 1.25rem auto 0;
      cursor: pointer;
    }
  }
}

.zsy_li {
  background: url(~assets/img/tyy/zs_li_img.png) no-repeat;
  text-align: center;
  position: absolute;
  width: 25.5625rem;
  height: 12.9375rem;
  background-size: 100% 100%;
  padding-top: 1.875rem;

  img {
    width: 6.875rem;
    height: 6.875rem;
  }

  .zsy_text {
    font-size: 1.25rem;
    font-weight: bold;
  }
}
.zsy_li:hover {
  transform: scale(1.2);
}

.zsy_li:nth-child(1) {
  left: -6.25rem;
  top: -3.75rem;
}

.zsy_li:nth-child(2) {
  right: -6.25rem;
  top: -3.75rem;
}

.zsy_li:nth-child(3) {
  right: -18.75rem;
  top: 9.375rem;
}

.zsy_li:nth-child(4) {
  right: -12.5rem;
  bottom: 0rem;
}

.zsy_li:nth-child(5) {
  left: 50%;
  margin-left: -12.75rem;
  bottom: -6.25rem;
}

.zsy_li:nth-child(6) {
  left: -12.5rem;
  bottom: 0rem;
}

.zsy_li:nth-child(7) {
  left: -18.75rem;
  top: 9.375rem;
}
</style>